extends ./layouts/default	

block title
	title Koa DouBan 首页

block content
	style.
		header {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			background: #00474f;
			color: #E7DACB;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			z-index: 500;
		}

		@media (min-width: 768px) {
			.sidebar {
			    position: -webkit-sticky;
			    position: sticky;
			    top: 4rem;
			    z-index: 1000;
			    height: calc(100vh - 4rem);
			    border-right: 1px solid rgba(0,0,0,.1);
			    order: 0;
			    border-bottom: 1px solid rgba(0,0,0,.1);
			}
		
			.cat-links {
			    display: block!important;
			    max-height: calc(100vh - 9rem);
			    overflow-y: auto;
			    padding-top: 1rem;
			    padding-bottom: 1rem;
			    margin-right: -15px;
			    margin-left: -15px;
			}
		}

		.sidebar-link {
			display: block;
			padding: .25rem 1.5rem;
			font-weight: 500;
			color: rgba(0,0,0,.65);
		}

		.sidebar .nav > li > a {
			display: block;
			padding: .25rem 1.5rem;
			font-size: 90%;
			color: rgba(0,0,0,.65);
		}

		.sidebar-item.active > .sidebar-inner {
			display: block;
		}
		.card {
			margin-bottom: 1.5rem;
		}
		.switcher {
			position: relative;
			padding: 1rem 15px;
			margin-right: -15px;
			margin-left: -15px;
			border-bottom: 1px solid rgba(0,0,0,.05);
		}
		.sidebar-toggle {
			line-height: 1;
			color: #212529;
		}
		.p-0 {
			padding: 0!important;
		}
		.ml-3, .mx-3 {
			margin-left: 1rem!important;
		}
		.btn-link {
			font-weight: 400;
			color: #007bff;
			background-color: transparent;
		}

	include ./includes/header

	.container-fluid
		.row
			.col-12.col-md-3.col-xl-2.sidebar
				.collapse.cat-links
					.sidebar-item.active
						a.sidebar-link(href='/') Links
						ul.nav.sidebar-inner
							li.active.sidebar-inner-active
								a(href='/') Link1
							li.sidebar-inner-active
								a(href='/') Link2
			.col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
				.row
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新

				.row
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新
				.row
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新
					.col-md-6
						.card
							img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
							.card-body
								h4.card-title 这是电影表体
								p.card-desc 这是电影描述
							.card-footer
								small.text-muted 1天谴更新
	// boostrap 弹窗组件
	#myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
		.modal-dialog.modal-lg
			#videoModal.modal-content

	include ./includes/script

	script.
		// 全局变量
		var player = null

		$(document).ready(function(e){
			$('#myModal').on('hidden.bs.modal', function(e){
				if(player && player.pause)
					player.pause
			})

			$('.card-img-top').click(function(e){
				var video = $(this).data('video')
				var image = $(this).attr('src')

				// 点击图片的时候，要吧弹窗弹出来,这个是BS的方法
				$('#myModal').modal('show')

				if(!player){
					player = new DPlayer({
						//- 这里必须是下面这种形式，不弄用 右边这种:container: $('#videoModal'),
						container: document.getElementById('videoModal'),
						screenshot: true,
						video:{
							url: video,
							pic: image,
							thumbnails: image
						}

					})
				}else{
					//- 如果player已经在播放，就继续播放
					if(player.video.currentScr !== video){
						palyer.switchVideo({
							url: video,
							pic: image,
							type: 'auto'
						})					
					}
				}
			})
		})


	//- include ./includes/footer